[5.0] feat(gauge): modify some default values, support svg pointer, add axisLine.distance/splitLine.distance/progress/anchor/data[i].title/data[i].detail #13216 #13416

yufeng04 · 2020-10-10T04:41:44Z

Brief Information

This pull request is in the type of:

bug fixing
new feature
others

What does this PR do?

modify some default values
support svg pointer
add distance to axisLine and splitLine
add anchor to gauge.series
add progress to gauge.series
add title and detail to series.data[i]
fix the color of text in dark mode

Fixed issues

【design】 #13216

Details

modify some default values

changes

configuration	before	after
axisLine.lineStyle.color	`[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]`	`[[1, '#E6EBF8']]`
axisLine.lineStyle.width	30	10
axisLine.roundCap	-	false
splitLine.length	30	10
splitLine.lineStyle.color	'#eee'	'#63677A'
splitLine.lineStyle.width	2	3
axisTick.length	8	6
axisTick.lineStyle.color	'#eee'	'#63677A'
axisLabel.distance	5	15
axisLabel.color	'auto'	'#46464'
axisLabel.fontSize	-	12
pointer.icon	-	null/svg/img/rect/...
pointer.offsetCenter	-	[0,0]
poinet.length	'80%'	'60%'
pointer.width	8	6
poiner.keepAspect	-	false
title.color	'#333'	'#464646'
title.offserCenter	[0, '-40%']	[0, '20%']
title.fontSzie	15	16
detail.color	'auto'	'#464646'
detail.fontWeight	-	'bold'
detail.lineHeight	-	30

Example(default values)

NOTE
if some configurations of the chart need to use default(auto) color, we should set xxx.color: 'auto'

support svg pointer

configuration

configuration	values	default	usage
pointer.icon	null/svg/img/rect/...	null	`pointer: {icon: 'path://xxxxx'}`

Example(svg path)

add distance to axisTick and splitLine

configuration

configuration	values	default	usage
axisTick.distance	number	10	`axisTick: {distance: 20}`
splitLine.distance	number	10	`splitLine: {distance: 20}`

example

add anchor to gauge.series

configuration

configuration	values	default	usage
anchor.show	boolean	false	-
anchor.showAbove	boolean	false	-
anchor.size	number	6	-
anchor.icon	string	'circle'	-
anchor.offsetCenter	array	[0,0]	-
anchor.keepAspect	boolean	false	-
anchor.itemStyle	object	`{color: '#fff', borderWidth: 0, borderColor: '#5470c6'}`	-

example

add progress to gauge.series

configuration

configuration	values	default	usage
progress.show	boolean	false	-
progress.overlap	boolean	true	-
progress.width	number	10	-
progress.roundCap	boolean	false	-
progress.clip	boolean	true	-

example(overlap: false, roundCap: true)

add title and detail to series.data[i]

configuration

configuration	values	default	usage
series[i].data[i].title	same as series[i].title	same as series[i].title	same as series[i].title
series[i].data[i].detail	same as series[i].detail	same as series[i].detail	same as series[i].detail

example

fix the color of text in dark mode

Usage

Are there any API changes?

The API has been changed.

Related test cases or examples to use the new APIs

NA.

Others

Merging options

Please squash the commits into a single one when merge.

Other information

How to get back to the previous default styles

option

    option = {
                tooltip: {
                    formatter: '{a} <br/>{b} : {c}%'
                },
                toolbox: {
                    feature: {
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '业务指标',
                        type: 'gauge',
                        axisLine: {
                            lineStyle: {
                                width: 30,
                                color: [[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
                            }
                        },
                        pointer: {
                            itemStyle: {
                                color: 'auto'
                            }
                        },
                        axisTick: {
                            distance: -30,
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        splitLine: {
                            length: 30,
                            distance: -30,
                            lineStyle: {
                                color: '#fff',
                                width: 2
                            }
                        },
                        axisLabel: {
                            color: 'auto',
                            distance: 35,
                            fontSize: 20
                        },
                        detail: {
                            formatter: '{value}%',
                            color: 'auto'
                        },
                        data: [{value: 50, name: '完成率'}]
                    }
                ]
            };

result

…t svg of pointer 4. add progress

echarts-bot · 2020-10-10T04:41:46Z

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

The pull request is marked to be PR: author is committer because you are a committer of this project.

plainheart

I've left my comments about the shapes(sector & sausage).

plainheart · 2020-10-11T04:57:12Z

src/util/types.ts

@@ -795,6 +795,7 @@ export interface LineStyleOption<Clr = ZRColor> extends ShadowOptionMixin {
    join?: CanvasLineJoin
    dashOffset?: number
    miterLimit?: number
+    roundCap?: boolean


Perhaps, roundCap is not very necessary. There is an option cap above. Setting cap to round is identical to roundCap.

Agree. roundCap should not be added in here. It's not for all lineStyle. Only gauge use it.

Also, there is a conflict here is we use lineStyle in gauge but draw the shape with fill. So either we use a limited subset of lineStyle, or we change the draw method from fill to stroke

Thanks! I forget to delete it.

plainheart · 2020-10-11T05:02:39Z

src/chart/gauge/GaugeView.ts

+        const axisLineModel = seriesModel.getModel('axisLine');
+
+        const roundCap = axisLineModel.get('roundCap');
+        const MainPath = roundCap ? Sausage : graphic.Sector;


Currently, the Sector shape has provided supports to draw corner radius. Using Sector should be enough.
Setting shape.cornerRadius and shape.innerCornerRadius to the half of the difference between shape.r and shape.r0 is identical to roundCap(Sausage).

I'm not sure if we should use Sector instead of Sausage.

There is a little difference between setting shape.cornerRadius/shape.innerCornerRadius and roundCap(Sausage).

Looks like the arc angle is not 360 degrees(a circle)? Is there something wrong with the startAngle and endAngle?
If it's a circle, the path should be closed.

Yes，you are right! I fixed the bug that gauge.axisLine can not be a circle when the arc angle is 360 degrees just now.

// angleRangeSpan can't be PI2 // const angleRangeSpan = (endAngle - startAngle) % PI2 const angleRangeSpan = !((endAngle - startAngle) % PI2) && endAngle !== startAngle ? PI2 : (endAngle - startAngle) % PI2;

Now, the path can be closed.

I made a test for this and it indicated that no such case. See the screenshot. If I'm missing something, please let me know.

The difference between setting shape.cornerRadius/shape.innerCornerRadius and roundCap(Sausage):

axisLine:{color: [color: [[0.9, '#0f0'], [1, '#f00']]} (cornerRadius maybe better)

porgress:{itemStyle: {color: '#f00',borderColor: '#0f0',borderWidth: 1}}, and the current value is greater than max value. (roundCap maybe better)

In order to keep axisLine and progress the same style, is roundCap better?

IMO, 110% seems not to be a normal value in gauge. Why and when will the percentage exceed 100%?

If we have to display a percentage that exceeds 100%, as you said, maybe it's better to use sausage instead of sector.

plainheart · 2020-10-11T05:10:38Z

src/chart/gauge/GaugeView.ts

-                }, seriesModel);
+        function createProgress(idx: number, endAngle: number) {
+            const roundCap = progressModel.get('roundCap');
+            const ProgressPath = roundCap ? Sausage : graphic.Sector;


The same as the above.

…to anchor 3. adjust the verticalAlign of label

pissang · 2020-10-16T09:48:51Z

src/chart/gauge/GaugeSeries.ts

+    show?: boolean
+    showAbove?: boolean
+    anchorSize?: number
+    icon?: string


It can be size instead of anchorSize here. Since it's already in the anchor option.

pissang · 2020-10-16T10:11:48Z

src/chart/gauge/GaugeView.ts

+            const pointerKeepAspect = pointerModel.get('keepAspect');
+            let pointer;
+            if (pointerStr.indexOf('path://') === 0) {
+                pointer = createSymbol(


pointerStr can starts with 'image://'. Or being rect, triangle.

I think set icon: null can use the default PointerPath icon. Otherwise use createSymbol.

pissang · 2020-10-16T10:14:12Z

src/chart/gauge/GaugeView.ts

+            const r0 = isOverlap ? posInfo.r - progressWidth : posInfo.r - (idx + 1) * progressWidth;
+            const r = isOverlap ? posInfo.r : posInfo.r - idx * progressWidth;
+            const progressSilent = progressModel.get('silent');
+            const progress = new ProgressPath({


series already has a silent configuration. There is no need to add silent in the progress option.

pissang · 2020-10-16T10:20:31Z

src/chart/gauge/GaugeView.ts

+                    if (showPointer) {
+                        const previousPointer = oldData.getItemGraphicEl(oldIdx) as PointerPath;
+                        const previousRotate = previousPointer.rotation;
+                        group.remove(previousPointer);


Should check if previousPointer exists. It's possible to have error when switching the show property from false to true.

pissang · 2020-10-16T10:20:55Z

src/chart/gauge/GaugeView.ts

-            }
+                    if (showProgress) {
+                        const previousProgress = oldProgressData[oldIdx];
+                        const previousEndAngle = previousProgress.shape.endAngle;


Same issues with above.

pissang · 2020-10-16T10:27:09Z

src/chart/gauge/GaugeView.ts

+            this._progressData = progressList;
+        }
+        else {
+            if (!showPointer) {


I think there is no need to check if (!showPointer) here. Since in this branch, showPointer and showProgress are all false.

Also, there is a removeAll code above. All the elements have been removed already. Also same issue in the above add update, remove callback

pissang · 2020-10-16T10:33:18Z

Besides these requested changes. I see lots of linting errors. It's better to check and fix all of them.

…. 3.delete progress.slent 4.delete the code of removing in renderPointer 5.fix code style

echarts-bot · 2020-10-17T06:54:12Z

Congratulations! Your PR has been merged. Thanks for your contribution! 👍

yufeng04 added 5 commits September 30, 2020 22:04

1. add splitLine.distance & axisTick.distance 2. add anchor 3. suppor…

485bcf7

…t svg of pointer 4. add progress

Merge branch 'next' into design-13216

affa98c

resize the svg pointer and progress

565fa0d

fix the resized bug & support the titleDetailItem

dc988d1

support data[i].title/data[i].detail & add test

5027432

echarts-bot bot added PR: author is committer PR: awaiting review labels Oct 10, 2020

pull-request-size bot added the size/XL label Oct 10, 2020

yufeng04 requested a review from pissang October 10, 2020 04:41

fix order of render configuration of gauge & add test of clock

59d00d3

plainheart reviewed Oct 11, 2020

View reviewed changes

yufeng04 added 2 commits October 12, 2020 13:29

delete the useless code

2033777

fix: gauge.axisLine can not be circle

09c42f1

plainheart linked an issue Oct 12, 2020 that may be closed by this pull request

仪表盘的圆环能否设置圆角？ #9140

Closed

yufeng04 added 5 commits October 13, 2020 11:33

fix:the progress can draw when current value is greater than max value

d283b9f

modify the test case of clock

2d6e782

add clip to progress

c92c8f5

adjust order of rendering anchor & pointer

87c1365

1. create path when data updating 2. add showAbove/icon/offsetCenter …

622c033

…to anchor 3. adjust the verticalAlign of label

pissang requested changes Oct 16, 2020

View reviewed changes

yufeng04 added 2 commits October 16, 2020 19:37

1.change anchorSize to size 2.pointer.icon support img/circle/rect/..…

0ce5122

…. 3.delete progress.slent 4.delete the code of removing in renderPointer 5.fix code style

fix:the logic of code in data.update

3729431

pissang approved these changes Oct 17, 2020

View reviewed changes

pissang merged commit 09d6750 into next Oct 17, 2020

echarts-bot bot removed the PR: awaiting review label Oct 17, 2020

pissang deleted the design-13216 branch October 17, 2020 06:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[5.0] feat(gauge): modify some default values, support svg pointer, add axisLine.distance/splitLine.distance/progress/anchor/data[i].title/data[i].detail #13216 #13416

[5.0] feat(gauge): modify some default values, support svg pointer, add axisLine.distance/splitLine.distance/progress/anchor/data[i].title/data[i].detail #13216 #13416

yufeng04 commented Oct 10, 2020 •

edited

Loading

echarts-bot bot commented Oct 10, 2020

plainheart left a comment

plainheart Oct 11, 2020

pissang Oct 12, 2020

yufeng04 Oct 12, 2020

plainheart Oct 11, 2020 •

edited

Loading

yufeng04 Oct 12, 2020

plainheart Oct 12, 2020 •

edited

Loading

yufeng04 Oct 12, 2020

plainheart Oct 12, 2020

yufeng04 Oct 13, 2020

plainheart Oct 13, 2020

plainheart Oct 11, 2020

pissang Oct 16, 2020

pissang Oct 16, 2020

pissang Oct 16, 2020

pissang Oct 16, 2020

pissang Oct 16, 2020

pissang Oct 16, 2020

pissang commented Oct 16, 2020

echarts-bot bot commented Oct 17, 2020

[5.0] feat(gauge): modify some default values, support svg pointer, add axisLine.distance/splitLine.distance/progress/anchor/data[i].title/data[i].detail #13216 #13416

[5.0] feat(gauge): modify some default values, support svg pointer, add axisLine.distance/splitLine.distance/progress/anchor/data[i].title/data[i].detail #13216 #13416

Conversation

yufeng04 commented Oct 10, 2020 • edited Loading

Brief Information

What does this PR do?

Fixed issues

Details

modify some default values

support svg pointer

add distance to axisTick and splitLine

add anchor to gauge.series

add progress to gauge.series

add title and detail to series.data[i]

fix the color of text in dark mode

Usage

Are there any API changes?

Related test cases or examples to use the new APIs

Others

Merging options

Other information

How to get back to the previous default styles

echarts-bot bot commented Oct 10, 2020

plainheart left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

plainheart Oct 11, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

plainheart Oct 12, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pissang commented Oct 16, 2020

echarts-bot bot commented Oct 17, 2020

yufeng04 commented Oct 10, 2020 •

edited

Loading

plainheart Oct 11, 2020 •

edited

Loading

plainheart Oct 12, 2020 •

edited

Loading